<template>
  <el-card class="table-card">
    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="80" align="center" />
      <el-table-column prop="content" label="内容" align="center" />
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column label="状态" width="120" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.status" @change="() => handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button-group>
            <el-button size="small" type="primary" @click="() => handleEdit(scope.row)">
              编辑
            </el-button>
            <el-popover placement="top" width="160" v-model:visible="scope.row.popoverVisible" trigger="click">
              <p>你确定？</p>
              <div>
                <el-button type="text" @click="scope.row.popoverVisible = false">
                  取消
                </el-button>
                <el-button type="text" @click="() => { handleDelete(scope.row.id); scope.row.popoverVisible = false }">
                  确定
                </el-button>
              </div>
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popover>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-drawer v-model="drawerVisible" title="修改内容" size="30%">
    <el-form :model="formData" label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="formData.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="formData.content" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="formData.status" />
      </el-form-item>
      <div class="drawer-footer">
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确认</el-button>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import { ListAPI, DeleteAPI, DateAPI } from "../api/api";

const list = ref([]);
const drawerVisible = ref(false);
const formData = ref({});
const currentId = ref("");

// 加载列表
const loadList = () => {
  ListAPI()
    .then(response => {
      list.value = response.data.map(item => ({ ...item, popoverVisible: false }));
    })
    .catch(error => {
      console.error("加载列表失败", error);
    });
};

// 删除操作
const handleDelete = (id) => {
  DeleteAPI(id)
    .then(() => loadList())
    .catch(error => {
      console.error("删除失败", error);
    });
};

// 编辑操作
const handleEdit = (row) => {
  formData.value = { ...row };
  currentId.value = row.id;
  drawerVisible.value = true;
};

// 保存操作
const handleSave = () => {
  DateAPI(currentId.value, formData.value)
    .then(() => {
      drawerVisible.value = false;
      loadList();
    })
    .catch(error => {
      console.error("保存失败", error);
    });
};

// 状态切换
const handleStatusChange = (row) => {
  const updatedData = {
    title: row.title,
    content: row.content,
    status: row.status,
  };
  DateAPI(row.id, updatedData)
    .then(() => loadList())
    .catch(error => {
      console.error("状态更新失败", error);
    });
};

// 初始加载
loadList();
</script>

<style scoped>
.table-card {
  margin: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #f3f4f6;
  font-weight: bold;
  text-align: center;
}

.el-table .el-table-column--align-center .cell {
  text-align: center;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.drawer-footer .el-button:first-child {
  margin-right: 10px;
}
</style>
